<template>
  <div id="app">
    <el-row>
      <el-col :span="4">
        <div class="width_96 margin_top_10">
          <div class="width_100 padding_bottom_10 border_bottom dispaly_flex">
            <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>

            <el-dropdown @command="menAdd">
              <span class="el-dropdown-link">
                <i class="el-icon-circle-plus icon_add"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="add">新增门店</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <el-tree class="tree_list margin_top_10" :data="treeData" node-key="id" default-expand-all highlight-current
            :expand-on-click-node="false" @node-click="handleNodeClick">
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <div>
                <img :src="icon_1" class="tree_icon" alt="" />
                <span>{{ node.label }}</span>
              </div>
              <el-dropdown @command="e => commandFn(e, data)">
                <span class="el-dropdown-link"><i class="el-icon-more el-icon--right"></i></span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="add">添加子部门</el-dropdown-item>
                  <el-dropdown-item command="edit">修改名称</el-dropdown-item>
                  <el-dropdown-item command="principal">设置负责人</el-dropdown-item>
                  <el-dropdown-item v-show="data.id != 1" command="del">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </span>
          </el-tree>
        </div>
      </el-col>
      <!-- 中间夹层 -->
      <el-col class="isolation" :span="0.1">
        <div>&nbsp;&nbsp;&nbsp;</div>
      </el-col>
      <!-- 左侧组织架构 -->
      <el-col v-if="!ShowHide" :span="19" class="small_box">
        <div class="width_100 list">
          <el-row class="width_98 display_flex align_items_center margin_top_10">
            <el-col :span="16" class="font_size_26">科里(天津)科技有限公司(北京分公司)（15人）</el-col>
            <el-col :span="9">
              <div class="display_flex align_items_center justify_content_flex_end tab_title">
                <div @click="principalMen(1)" class="men_box" style="cursor: pointer">
                  <img class="store_img" src="../../assets/images/store/mendian.png" alt="" />
                  门店设置
                </div>

                <div @click="principalMen(2)" style="cursor: pointer" class="men_box">
                  <img class="store_img" src="../../assets/images/store/zuzhi.png" alt="" />
                  添加子部门
                </div>

                <div @click="principalMen(3)" style="cursor: pointer; %" class="men_box">
                  <img class="store_img" src="../../assets/images/store/fuzeren.png" alt="" />
                  设置负责人
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="width_98 box">
          <el-row class="display_flex" :gutter="10">
            <el-col :span="13">
              <el-button type="primary" size="mini" @click="add(1)">添加成员</el-button>
              <el-button type="primary" size="mini" @click="CRUD('equipment')" plain>绑定设备</el-button>
              <el-button type="primary" size="mini" plain @click="Exceladd">批量导出</el-button>
              <el-button type="primary" size="mini" @click="CRUD('Aggregate')" plain>聚合码</el-button>

              <el-button type="danger" size="mini" @click="CRUD('del')" plain>删除</el-button>
            </el-col>
            <el-col :span="4"></el-col>
            <el-col :span="12" class="display_flex align_items_center">
              <el-input placeholder="搜索成员/手机号/部门" prefix-icon="el-icon-search" v-model="input2"
                @keyup.enter.native="handleEnter">
              </el-input>
              <el-dropdown @command="handleScreen">
                <i class="el-icon-s-fold margin_left_10"></i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="1">全部</el-dropdown-item>
                  <el-dropdown-item command="2">正常成员</el-dropdown-item>
                  <el-dropdown-item command="3">禁用成员</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </div>
        <div v-if="list.length != 0">
          <el-table :data="list" class="margin_top_10 table_list" @selection-change="handleSelectionChange"
            style="width: 100%" :header-cell-style="{ background: '#E6EFFF' }">
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="name" label="员工昵称"></el-table-column>
            <el-table-column prop="date" label="手机号"></el-table-column>
            <el-table-column prop="date" label="工号"></el-table-column>
            <el-table-column prop="date" label="归属门店/部门"></el-table-column>
            <el-table-column prop="date" label="收款码">
              <template slot-scope="scope"><el-button @click="handleClick(scope.row, 1)" type="text"
                  size="small">查看</el-button></template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="add(2)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
              :total="400">
            </el-pagination>
          </div>
        </div>

        <div v-if="list.length == 0"></div>

        <el-empty description="当前部门无任何成员" v-if="list.length == 0">
          <el-button type="primary" @click="add(1)">添加成员</el-button>
        </el-empty>
      </el-col>

      <!-- 门店设置 -->
      <el-col v-if="ShowHide" :span="18" class="small_box">
        <div class="width_100 list">
          <el-row class="width_98 display_flex align_items_center margin_top_10">
            <el-col :span="18" class="font_size_26 font_size_men">门店设置</el-col>
          </el-row>
        </div>
        <div class="width_98 box">
          <el-row class="display_flex" :gutter="10">
            <el-form :model="form" :rules="formRules" ref="formRules" label-width="100px" class="demo-ruleForm"
              style="position: relative">
              <el-form-item class="margin_top_20" label="门店名称：" prop="username">
                <el-input placeholder="请输入门店名称" v-model="form.username"></el-input>
              </el-form-item>
              <el-form-item class="margin_top_20" label="门店简称：" prop="abbreviation">
                <el-input placeholder="请输入门店简称" v-model="form.abbreviation"></el-input>
              </el-form-item>
              <el-form-item class="margin_top_20" label="经营类目：" prop="Business_category">
                <el-select style="width: 100%" v-model="form.Business_category" placeholder="请选择经营类目">
                  <el-option label="超市" value="1"> </el-option>
                  <el-option label="饭店" value="2"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="margin_top_20" label="门店地址：" prop="address">
                <el-cascader style="width: 100%" :append-to-body="false" v-model="form.address" readonly="readonly"
                  size="medium" :props="optionProps" :options="options"></el-cascader>
              </el-form-item>
              <el-form-item class="margin_top_20" label="详细地址：" prop="detailed">
                <el-input placeholder="请输入详细地址" v-model="form.detailed"></el-input>
              </el-form-item>
              <el-form-item class="margin_top_20" label="手机号码：" prop="phone">
                <el-input placeholder="请输入手机号码：" v-model="form.phone"></el-input>
              </el-form-item>
              <el-form-item class="margin_top_20" label="门店logo：" prop="model">
                <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
                  :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                  <img v-else src="../../assets/images/store/md_log.png" class="avatar" alt="" />
                </el-upload>
                <span class="font_size_12 color_A3A3A3">请上传jpg/png格式图片图片大小不超过2M</span>
              </el-form-item>
              <el-form-item class="margin_top_20" label="IOT设置：" prop="model">
                <el-button type="text" @click="impowerClick(1)">设置</el-button>
              </el-form-item>
              <el-form-item class="margin_top_20" label="预授权设置：" prop="model">
                <el-button type="text" @click="impowerClick(2)">设置</el-button>
              </el-form-item>
              <el-form-item class="margin_top_20" label="花呗设置：" prop="model">
                <el-button type="text" @click="impowerClick(3)">设置</el-button>
              </el-form-item>
              <el-form-item class="margin_top_20" label="聚合码设置：" prop="model">
                <el-button type="text" @click="impowerClick(4)">设置</el-button>
              </el-form-item>
            </el-form>
          </el-row>
          <div class="img_box_item">
            <img style="width: 100%; height: 100%" src="../../assets/images/menu/mendian1.png" alt="" />
          </div>
          <div class="men_add">
            <el-button class="bottom_item" type="primary" @click="ModifyStore">保 存</el-button>
            <el-button class="bottom_item" @click="resetForm(6)">取 消</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- ----------------------------------------------------------------------------------------- -->

    <!-- 绑定设备列表 -->
    <el-dialog title="设备绑定" :visible.sync="equipmentVisible" width="80%">
      <el-table :header-cell-style="{ background: '#E6EFFF' }" :data="list" class="margin_top_10" style="width: 100%">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="date" label="设备SN编号"></el-table-column>
        <el-table-column prop="date" label="设备型号"></el-table-column>
        <el-table-column prop="date" label="设备用途"></el-table-column>
        <el-table-column prop="date" label="查看照片">
          <template slot-scope="scope"><el-button @click="handleClick(scope.row, 2)" type="text"
              size="small">查看</el-button></template>
        </el-table-column>
        <el-table-column prop="store" label="状态">
          <template slot-scope="scope">
            {{ scope.row.store == 1 ? "已绑定" : "未绑定" }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.store == 2" type="text" size="small" @click="relevancy(1)">绑定</el-button>
            <el-button v-if="scope.row.index == 1" type="text" size="small" @click="relevancy(2)">解绑</el-button>
            <el-button v-if="scope.row.index == 2" type="text" size="small" @click="relevancy(3)">设备联动</el-button>
            <el-button v-if="scope.row.index == 1" type="text" size="small" @click="relevancy(4)">解除联动</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
          :total="400">
        </el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="equipmentVisible = false">取 消</el-button>
        <el-button type="primary" @click="equipmentVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 设备绑定 -->
    <el-dialog :title="title" :visible.sync="equipmentVisible1" width="30%" center @close="cancelReset">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="设备类型：" prop="sty">
          <el-input disabled style="100px" v-model="ruleForm.sty"></el-input>
        </el-form-item>
        <el-form-item label="设备型号：" prop="model">
          <el-input disabled style="100px" v-model="ruleForm.model"></el-input>
        </el-form-item>
        <el-form-item v-if="title == '设备绑定'" label="设备SN码：" prop="sn_data">
          <el-input style="100px" placeholder="请输入设备sn编号" v-model="ruleForm.sn_data"></el-input>
        </el-form-item>
        <el-form-item v-show="title == '解绑联动' || title == '设备联动'" label="云喇叭：" prop="trumpet">
          <el-select v-model="ruleForm.trumpet" placeholder="请选择">
            <el-option label="云喇叭" value="1"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="title == '解绑联动'">
          <div style="font-size: 12px; color: #ff3131">
            解除联动后收单设备收款成功后将不在云喇叭设备上同步播放
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelReset">取 消</el-button>
        <el-button v-show="title == '解绑联动'" type="primary" @click="submitForm">确 定</el-button>
        <el-button v-show="title == '设备联动'" type="primary" @click="submitForm">确 定</el-button>
        <el-button v-show="title == '设备绑定'" type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="选择成员所在部门" class="ee_box" :visible.sync="principal" :show-close="false" width="50%">
      <div class="width_100">
        <el-row class="width_90">
          <el-col :span="12">
            <div class="e_box_left">
              <div class="width_90 text_align_center margin_top_20">
                <el-input placeholder="搜索部门" prefix-icon="el-icon-search"></el-input>
              </div>
              <div class="width_96" style="max-height: 340px; overflow: auto">
                <el-tree class="tree_list margin_top_10" :data="treeData" node-key="ida" default-expand-all
                  :expand-on-click-node="false" @node-click="pop_node_click">
                  <span class="custom-tree-node" slot-scope="{ node }">
                    <img :src="icon_1" class="tree_icon" alt="" />
                    <div style="flex: 1; text-align: left" class="margin_left_10">
                      <span>{{ node.label }}</span>
                    </div>
                  </span>
                </el-tree>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="e_box_right">
              <div class="width_90 margin_top_20">已选择的部门</div>

              <div class="width_96 margin_top_10" style="max-height: 330px; overflow: auto">
                <div class="width_90 display_flex align_items_center padding_6 background_DDEDFF"
                  v-for="(item, index) in SetDepartment" :key="item.id">
                  <img :src="icon_1" class="tree_icon" alt="" />
                  <div class="flex_1 margin_left_10">{{ item.label }}</div>
                  <div class="icon_2" @click="pop_node_del_click(index)">
                    <i class="el-icon-close"></i>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="btn_group">
        <el-button class="btn_no" @click="principal = false">取 消</el-button>
        <el-button class="btn_yes" @click="principal = false">保 存</el-button>
      </div>
    </el-dialog>
    <!-- 设置负责人 -->
    <!-- <el-dialog
      @close="principalMenOver"
      title="设置部门负责人"
      :visible.sync=""
      width="36%"
    >
      <el-transfer
        v-model="reserveIdList"
        ref="reserve"
        @left-check-change="handleChange"
        :data="transferData"
        filterable
        :titles="['成员列表', '已选择成员']"
      >
      </el-transfer>
      <span slot="footer" class="dialog-footer store_footer">
        <el-button @click="resetForm(5)">取 消</el-button>
        <el-button type="primary" @click="principalMen = false"
          >确 定</el-button
        >
      </span>
    </el-dialog> -->
    <!-- 新增门店 -->
    <el-dialog :title="sub_title" :visible.sync="dialogVisible" :show-close="false" center width="40%" @close="close_sub">
      <div v-show="sub_title == '新增门店'">
        <el-form :model="form" :rules="formRules" ref="formRules" label-width="100px" class="demo-ruleForm"
          style="position: relative">
          <el-form-item label="门店名称：" prop="username">
            <el-input placeholder="请输入门店名称" v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item label="门店简称：" prop="abbreviation">
            <el-input placeholder="请输入门店简称" v-model="form.abbreviation"></el-input>
          </el-form-item>
          <el-form-item label="经营类目：" prop="Business_category">
            <el-select v-model="form.Business_category" placeholder="请选择经营类目">
              <el-option label="超市" value="1"> </el-option>
              <el-option label="饭店" value="2"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="门店地址：" prop="address">
            <el-cascader :append-to-body="false" v-model="form.address" readonly="readonly" size="medium"
              :props="optionProps" :options="options"></el-cascader>
          </el-form-item>
          <el-form-item label="详细地址：" prop="detailed">
            <el-input placeholder="请输入详细地址" v-model="form.detailed"></el-input>
          </el-form-item>
          <el-form-item label="手机号码：" prop="phone">
            <el-input placeholder="请输入手机号码：" v-model="form.phone"></el-input>
          </el-form-item>
          <el-form-item label="门店logo：" prop="model">
            <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <img v-else src="../../assets/images/store/md_log.png" class="avatar" alt="" />
            </el-upload>
            <span class="font_size_12 color_A3A3A3">请上传jpg/png格式图片图片大小不超过2M</span>
          </el-form-item>
          <el-form-item label="IOT设置：" prop="model">
            <el-button type="text" @click="impowerClick(1)">设置</el-button>
          </el-form-item>
          <el-form-item label="预授权设置：" prop="model">
            <el-button type="text" @click="impowerClick(2)">设置</el-button>
          </el-form-item>
          <el-form-item label="花呗设置：" prop="model">
            <el-button type="text" @click="impowerClick(3)">设置</el-button>
          </el-form-item>
          <el-form-item label="聚合码设置：" prop="model">
            <el-button type="text" @click="impowerClick(4)">设置</el-button>
          </el-form-item>
        </el-form>
        <div class="img_box">
          <img style="width: 100%; height: 100%" src="../../assets/images/menu/mendian1.png" alt="" />
        </div>
      </div>
      <div style="display: flex; justify-content: center" v-show="sub_title == '添加子部门'">
        <el-form :model="form" :rules="formRules" ref="formRules" style="width: 400px">
          <el-form-item label="部门名称：" prop="subdivision">
            <el-input placeholder="请输入部门名称" v-model="form.subdivision"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div style="display: flex; justify-content: center" v-show="sub_title == '修改名称'">
        <el-form :model="form" ref="formRules" :rules="formRules" style="width: 400px">
          <el-form-item label="部门名称：" prop="subdivision">
            <el-input placeholder="请输入部门名称" v-model="form.subdivision"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm(2)">取 消</el-button>
        <el-button v-if="sub_title == '修改名称'" type="primary" @click="formadd(1)">确 定</el-button>
        <el-button v-else type="primary" @click="formadd">确 定</el-button>
      </span>
    </el-dialog>
    <!-- lot/花呗... -->
    <el-dialog :title="centerTitle" :visible.sync="centerDialogVisible" width="40%" center @close="handleClose">
      <div v-if="centerTitle == 'iot设置'">
        <el-form :model="iotForm" ref="iotsForm" label-width="150px">
          <el-form-item label="IOT首页：">
            <el-tooltip class="item" effect="dark" content="提示：是否展示iot端的首页面（开始结算页面）" placement="right">
              <el-switch v-model="iotForm.lot_home" active-value="1" inactive-value="2">
              </el-switch>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="IOT支付：">
            <el-tooltip class="item" effect="dark" content="提示：iot端展示的支付方式" placement="right">
              <template>
                <el-checkbox-group size="mini" v-model="iotForm.lot_pay">
                  <el-checkbox label="刷脸支付" :value="1" class="round-checkbox"></el-checkbox>
                  <el-checkbox label="扫码支付" :value="2" class="round-checkbox"></el-checkbox>
                  <el-checkbox label="会员支付" :value="3" class="round-checkbox"></el-checkbox>
                </el-checkbox-group>
              </template>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="微信支付图标：">
            <el-tooltip class="item" effect="dark" content="提示：iot端扫码支付是否展示微信支付图标" placement="right">
              <el-switch v-model="iotForm.icons" active-value="1" inactive-value="2"></el-switch>
            </el-tooltip>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="centerTitle == '预授权设置'">
        <el-form label-width="150px">
          <el-form-item label="预授权支付：">
            <el-switch v-model="iotForm.advance_payment" active-value="1" inactive-value="2">
            </el-switch>
          </el-form-item>
          <el-form-item label="预授权业务名称：">
            <el-input placeholder="请输入预授权业务名称" v-model="iotForm.pay_name"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="centerTitle == '花呗设置'">
        <div class="title_div">仅直连模式支持花呗分期</div>
        <el-form label-width="150px">
          <el-form-item label="花呗分期：">
            <el-switch v-model="iotForm.advance_payment" active-value="1" inactive-value="2">
            </el-switch>
          </el-form-item>
          <el-form-item label="最小金额：">
            <el-input-number v-model="iotForm.num" label="请输入最小金额"></el-input-number>
          </el-form-item>
          <el-form-item label="分期设置：">
            <!-- <el-checkbox value="3" v-model="list_By">3期 </el-checkbox>
            <el-checkbox value="6" v-model="list_By">6期 </el-checkbox>
            <el-checkbox value="12" v-model="list_By">12期 </el-checkbox> -->

            <div>
              <el-checkbox true-label="1" false-label="0" v-model="listBy.three.thirdPhase">3期
              </el-checkbox>
              <div class="radio_by">
                <el-radio v-model="listBy.three.assume" label="1">卖家承担（2.30%）</el-radio>
                <el-radio v-model="listBy.three.assume" label="2">商家承担（1.80%）</el-radio>
              </div>
            </div>
            <div>
              <el-checkbox true-label="1" false-label="0" v-model="listBy.six.sixPhase">6期</el-checkbox>
              <div class="radio_by">
                <el-radio v-model="listBy.six.assume" label="1">卖家承担（4.50%）</el-radio>
                <el-radio v-model="listBy.six.assume" label="2">商家承担（4.50%）</el-radio>
              </div>
            </div>
            <div>
              <el-checkbox true-label="1" false-label="0" v-model="listBy.twelve.twelvePhase">12期</el-checkbox>
              <div class="radio_by">
                <el-radio v-model="listBy.twelve.assume" label="1">卖家承担（7.50%）</el-radio>
                <el-radio v-model="listBy.twelve.assume" label="2">商家承担（7.50%）</el-radio>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="centerTitle == '聚合码'">
        <div class="title_div">淄川区岭子兴峰油品经营店</div>
        <div class="title_div">
          <el-image style="width: 100px; height: 100px"
            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
        </div>
      </div>
      <div v-if="centerTitle == '收款码'">
        <div class="title_div">
          <el-image style="width: 100px; height: 100px"
            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="centerTitle != '聚合码' && centerTitle != '收款码'" @click="iot_over">取 消</el-button>
        <el-button v-if="centerTitle == 'iot设置'" type="primary" @click="iot_add(1)">确 定</el-button>
        <el-button v-if="centerTitle == '预授权设置'" type="primary" @click="iot_add(2)">确 定</el-button>
        <el-button v-if="centerTitle == '花呗设置'" type="primary" @click="iot_add(3)">确 定</el-button>
        <el-button v-if="centerTitle == '聚合码'" type="primary" @click="AggregateCode(1, 'hahahah')">复制链接</el-button>
        <a href="https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg"
          download="example.jpg"><el-button v-if="centerTitle == '聚合码'" type="primary" size="small">下载聚合码</el-button></a>
        <!-- <el-button
          v-if="centerTitle == '聚合码'"
          type="primary"
          @click="AggregateCode(2)"
        >
          下载聚合码
        </el-button> -->
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  get,
  post,
  formatterCellval,
  pickerOptions
} from "../../util/request.js"
import { icon_1 } from "../../util/icon.js"
import { addressFun } from "../../util/address.js"
export default {
  name: "",
  data() {
    var treeData = [
      {
        id: 1,
        label: "一级 1",
        children: [
          {
            id: 4,
            label: "二级 1-1",
            children: [
              {
                id: 9,
                label: "三级 1-1-1"
              },
              {
                id: 10,
                label: "三级 1-1-2"
              }
            ]
          }
        ]
      },
      {
        id: 2,
        label: "一级 2",
        children: [
          {
            id: 5,
            label: "二级 2-1"
          },
          {
            id: 6,
            label: "二级 2-2"
          }
        ]
      },
      {
        id: 3,
        label: "一级 3",
        children: [
          {
            id: 7,
            label: "二级 3-1"
          },
          {
            id: 8,
            label: "二级 3-2"
          }
        ]
      },
      {
        id: 0,
        label: "未分组"
      }
    ]

    var generateData = _ => {
      const data = [
        { key: 1, label: "马冬梅" },
        { key: 4, label: "秋晓雅" },
        { key: 2, label: "夏东海" },
        { key: 3, label: "大傻春" }
      ]
      return data
    }

    return {
      SetDepartment: [],
      ExeList: [],
      icon_1: icon_1,
      // 花呗分期
      listBy: {
        three: {
          thirdPhase: "",
          assume: ""
        },
        six: {
          sixPhase: "",
          assume: ""
        },
        twelve: {
          twelvePhase: "",
          assume: ""
        }
      },
      centerTitle: "",
      ShowHide: false,
      optionProps: {
        value: "code",
        label: "name",
        children: "sons"
      },
      options: addressFun(),
      transferData: generateData(),
      title: "设备绑定",
      reserveIdList: [],
      ruleForm: {
        sty: "蜻蜓系列",
        model: "支付宝盒F6系列",
        sn_data: "",
        trumpet: ""
      },
      //绑定设备
      rules: {
        sty: [{ required: true, message: "请输入设备类型", trigger: "blur" }],
        model: [{ required: true, message: "请输入设备型号", trigger: "blur" }],
        sn_data: [
          {
            required: true,
            message: "请输入设备sn编码",
            trigger: "blur"
          }
        ],
        trumpet: [
          { required: true, message: "请选择联动设备", trigger: "blur" }
        ]
      },

      treeData: JSON.parse(JSON.stringify(treeData)),
      filterText: "",
      time: "",
      input2: "",
      currentPage: 1,
      pageTotal: 0,
      list: [
        {
          name: "张三",
          date: "2023-10-26",
          address: "山东省济南市历下区泉城路",
          num: 12,
          store: "1",
          index: "1"
        },
        {
          name: "张三",
          date: "2023-10-26",
          address: "山东省济南市历下区泉城路",
          num: 12,
          store: "1",
          index: "1"
        },
        {
          name: "张三",
          date: "2023-10-26",
          address: "山东省济南市历下区泉城路",
          num: 12,
          store: "2"
        },
        {
          name: "张三",
          date: "2023-10-26",
          address: "山东省济南市历下区泉城路",
          num: 12,
          store: "2"
        }
      ],
      iotForm: {
        lot_pay: []
      },
      form: {},
      // 门店校验
      formRules: {
        username: [
          { required: true, message: "请输入门店名称", trigger: "blur" }
        ],
        abbreviation: [
          { required: true, message: "请输入门店简称", trigger: "blur" }
        ],
        Business_category: [
          { required: true, message: "请选择经验类目", trigger: "blur" }
        ],
        address: [
          { required: true, message: "请选择门店地址", trigger: "blur" }
        ],
        detailed: [
          { required: true, message: "请输入详细地址", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "手机号格式不正确",
            trigger: "blur"
          }
        ],
        subdivision: [
          { required: true, message: "请输入部门名称", trigger: "blur" },
          {
            pattern: /^[\u4e00-\u9fa5]{1,8}$/,
            message: "部门名称应为中文/英文字符，最多八个字符的长度",
            trigger: "blur"
          }
        ]
      },

      imageUrl: "",
      sub_title: "",
      dialogVisible: false,
      equipmentVisible: false,
      equipmentVisible1: false,
      principal: false,
      centerDialogVisible: false
    }
  },
  mounted() { },
  methods: {
    pop_node_click(res) {
      var str = false
      this.SetDepartment.forEach(data => {
        if (data.id == res.id) {
          tipsFun(this, "error", "已存在")
          str = true
        }
      })
      if (!str) {
        this.SetDepartment.push(res)
      }
    },
    pop_node_del_click(index) {
      this.SetDepartment.splice(index, 1)
    },
    // 搜索事件
    handleEnter() {
      console.log("搜索信息", this.input2)
    },
    // 监视添加/修改名称
    close_sub() {
      this.$refs.formRules.resetFields()
    },
    // 监视花呗/lot弹窗
    handleClose() {
      this.iot_over()
    },
    // 查看收款码
    handleClick(val, type) {
      if (type == 1) {
        this.centerDialogVisible = true
        this.centerTitle = "收款码"
      } else {
        this.centerDialogVisible = true
        this.centerTitle = "设备照片"
      }
    },
    // 下载聚合码
    AggregateCode(val, type) {
      if (val == 1) {
        navigator.clipboard
          .writeText("嘿嘿嘿")
          .then(() => {
            this.$message.success("复制成功")
          })
          .catch(() => {
            this.$message.error("复制失败")
          })
      } else {
      }
    },
    // 取消iot
    iot_over() {
      this.centerDialogVisible = false
        ; (this.iotForm = {
          lot_pay: []
        }),
          (this.listBy = {
            three: {
              thirdPhase: "",
              assume: ""
            },
            six: {
              sixPhase: "",
              assume: ""
            },
            twelve: {
              twelvePhase: "",
              assume: ""
            }
          })
    },
    // iot设置
    iot_add(val) {
      if (val == 1) {
        console.log("iot设置", this.iotForm)
        this.iot_over()
      } else if (val == 2) {
        console.log("预支付授权设置", this.iotForm)
        this.iot_over()
      } else if (val == 3) {
        console.log("花呗分期", this.iotForm)
        console.log(this.listBy)
        this.iot_over()
      }
    },
    // iot/花呗啥的
    impowerClick(val) {
      if (val == 1) {
        this.centerDialogVisible = true
        this.centerTitle = "iot设置"
      } else if (val == 2) {
        this.centerDialogVisible = true
        this.centerTitle = "预授权设置"
      } else if (val == 3) {
        this.centerDialogVisible = true
        this.centerTitle = "花呗设置"
      } else if (val == 4) {
        this.centerDialogVisible = true
        this.centerTitle = "聚合码"
      }
    },

    // 门店设置
    ModifyStore() {
      this.$refs.formRules.validate(valid => {
        if (valid) {
          console.log(valid)
        }
      })
    },
    // 上传图片
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg"
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!")
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!")
      }
      return isJPG && isLt2M
    },
    // 关闭负责人
    principalMenOver() {
      this.principal = false
      this.reserveIdList = []
    },
    // 穿梭框
    handleChange(value, direction) {
      this.$nextTick(() => {
        this.$refs.reserve.addToRight()
        console.log(this.reserveIdList)
      })
    },
    // 设置负责人/门店/子部门
    principalMen(val) {
      if (val == 3) {
        this.principal = true
      } else if (val == 1) {
        this.ShowHide = true
      } else {
        this.sub_title = "添加子部门"
        this.dialogVisible = true
      }
    },
    // 重置设备添加的表单
    resetForm(val) {
      if (val == 2) {
        this.$refs.formRules.resetFields()
        this.dialogVisible = false
      } else if (val == 6) {
        this.$refs.formRules.resetFields()
        this.ShowHide = false
      } else if (val == 5) {
        this.reserveIdList = []
        this.principal = false
        this.ShowHide = false
      }
    },
    // 新增门店
    formadd(val) {
      if (val == 1) {
        console.log("修改部门名称")
      } else {
        this.$refs.formRules.validate(valid => {
          if (valid) {
            console.log(valid)
          }
        })
      }
    },
    // 确认绑定
    submitForm() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          console.log(111)
          this.equipmentVisible1 = false
        }
      })
    },
    // 关闭解绑/绑定/联动...
    cancelReset() {
      this.$refs.ruleForm.resetFields()
      this.equipmentVisible1 = false
    },
    // 绑定设备、联动
    relevancy(val) {
      if (val == 1) {
        this.equipmentVisible1 = true
        this.title = "设备绑定"
      } else if (val == 2) {
        this.$confirm("解绑后，本商户将无法使用该设备", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "error",
          center: true
        })
          .then(() => {
            this.$message({
              type: "success",
              message: "解绑成功!"
            })
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消解绑"
            })
          })
      } else if (val == 3) {
        this.title = "设备联动"
        this.equipmentVisible1 = true
      } else {
        this.title = "解绑联动"
        this.equipmentVisible1 = true
      }
    },
    menAdd(val) {
      console.log("新增门店", val)
      this.dialogVisible = true
      this.sub_title = "新增门店"
    },
    CRUD(val) {
      if (val == "del") {
        console.log("删除门店")
        this.$confirm("确定删除所选组织层级？", "提示", {
          confirmButtonText: "确定删除",
          cancelButtonText: "取消",
          type: "error",
          center: true
        })
          .then(() => {
            this.$message({
              type: "success",
              message: "删除成功!"
            })
          })
          .catch(() => {
            this.$message({
              message: "取消删除"
            })
          })
      } else if (val == "Aggregate") {
        console.log("查看聚合码")
        this.centerDialogVisible = true
        this.centerTitle = "聚合码"
      } else if (val == "equipment") {
        console.log("绑定设备")
        this.equipmentVisible = true
      }
    },
    handleScreen(val) { },
    // 导出excel表格
    Exceladd() {
      console.log(this.ExeList)
      if (this.ExeList.length == 0) {
        this.$message("最少选择一个成员")
        return
      }
      console.log("导出成功")
    },
    handleNodeClick(data) {
      console.log("选中当前", data)
    },
    commandFn(res, e) {
      console.log(res, e)
      if (res == "add") {
        this.sub_title = "添加子部门"
        this.dialogVisible = true
      } else if (res == "edit") {
        this.sub_title = "修改名称"
        this.dialogVisible = true
      } else if (res == "del") {
        console.log(res, e)
        this.$confirm("确定删除" + e.label + "部门？", "删除部门", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.$message({
              type: "success",
              message: "删除成功!"
            })
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            })
          })
      } else if (res == "principal") {
        this.principal = true
      }
    },
    treeClickFn() { },
    // 添加成员
    add(val) {
      var parameter
      var id
      if (val == 1) {
        var parameter = "添加成员"
        localStorage.removeItem("key")
      } else {
        var parameter = "编辑成员"
        var id = 111
      }
      this.$router.push({
        name: "StoreDetail",
        params: {
          id: id,
          parameter: parameter
        }
      })
    },
    handleSelectionChange(val) {
      console.log("选中的数据", val)
      this.ExeList = val
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style scoped="true">
#app {
  background-color: #fff !important;
}

.background_DDEDFF {
  background: #ddedff;
  margin-top: 10px;
  border-radius: 8px;
}

.icon_2 {
  font-size: 16px;
}

.tree_list>>>.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.tree_list>>>.el-tree-node__content:hover {
  background-color: #ecf2fe !important;
}

.pagination {
  margin: 20px;
  text-align: right;
}

/deep/ .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
  color: #0067d9;
  /* font-weight: 700; */
}

.tree_icon {
  width: 14px;
  height: 14px;
}

.radio_by {
  display: flex;
  background-color: #ecf2fe;
  /* width: 423px; */
  padding: 0 5px;
  height: 35px;
  background: #ecf2fe;
  border-radius: 4px 4px 4px 4px;
  justify-content: center;
  align-items: center;
  font-size: 12px;
}

.title_div {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  font-size: 12px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #b1b1b1;
}

.el-checkbox {
  border-radius: 50% !important;
}

/* .round-checkbox .el-checkbox__inner {
  border-radius: 10px !important;
} */
.isolation {
  background-color: #f1f4f9;
  height: 100vh;
}

.bottom_item {
  width: 103px;
  height: 37px;
}

.men_add {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

.font_size_men {
  width: 100%;
  font-size: 18px !important;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #413f3f;
  padding: 4px;
  border-bottom: 1px solid #e4e4e4;
}

.store_footer {
  display: flex;
  justify-content: center;
}

.img_box_item {
  position: absolute;
  right: 10px;
  top: 80px;
}

.img_box {
  width: 274px;
  height: 173px;
  position: absolute;
  right: 10px;
  bottom: -40px;
}

.avatar {
  width: 98px;
  height: 98px;
  display: block;
}

.transfer-footer {
  margin-left: 20px;
  padding: 6px 5px;
}

.icon_add {
  margin: 0 5px;
  color: #3f75ff;
}

.dispaly_flex {
  display: flex;
  align-items: center;
}

.store_img {
  width: 15px;
  height: 15px;
  margin: 0 5px;
}

.table_list>>>.el-table__cell {
  text-align: center;
}

.men_box {
  display: flex;
  align-items: center;
  width: 91px;
  height: 29px;
  background: #ffffff;
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  border: 1px solid #3f75ff;
  text-align: center;
  line-height: 29px;
}

.tree_list>>>.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

/* .tree_list >>> .el-tree-node__content:hover {
  background-color: red !important;
} */

.list>>>.font_size_26 {
  font-size: 26px;
}

.list>>>.tab_title {
  font-size: 12px;
  color: #0067d9;
}

.list>>>.tab_title div {
  margin-right: 10px;
}

.small_box>>>.list {
  padding: 10px 0;
}

.small_box>>>.box {
  padding: 10px;
  border-radius: 6px;

  /* background-color: rgba(236, 242, 254, 1); */
}
</style>
